<Page [ngClass]="'button'" [title]="'Button'" [subTitle]="'按钮'">
  <div class="button-sp-area">
    <button weui-button>页面主操作</button>
    <button weui-button [weui-loading]="loading" (click)="loading = !loading">页面主操作</button>
    <button weui-button disabled>页面主操作</button>
    <button weui-button weui-type="default">页面次要操作</button>
    <button weui-button weui-type="default" [weui-loading]="loading" (click)="loading = !loading">
      页面次要操作
    </button>
    <button weui-button weui-type="default" disabled>
      页面次要操作
    </button>
    <button weui-button weui-type="warn">警告类操作</button>
    <button weui-button weui-type="warn" [weui-loading]="loading" (click)="loading = !loading">
      警告类操作
    </button>
    <button weui-button weui-type="warn" disabled>
      警告类操作
    </button>
  </div>

  <div class="button-sp-area cell">
    <a href="javascript:;" weui-button weui-cell weui-type="default">普通行按钮</a>
    <a href="javascript:;" weui-button weui-cell>强调行按钮</a>
    <a href="javascript:;" weui-button weui-cell>
      <img
        weui-button-icon
        src=""
      />
      强调行按钮
    </a>
    <a href="javascript:;" weui-button weui-cell weui-type="warn">警告行按钮</a>
  </div>

  <div class="button-sp-area">
    <button weui-button weui-mini (click)="mini = !mini">按钮</button>
    <button weui-button weui-mini (click)="mini = !mini" weui-type="default" style="margin-left: 8px;">
      按钮
    </button>
    <button weui-button weui-mini (click)="mini = !mini" [weui-type]="'warn'" style="margin-left: 8px;">
      按钮
    </button>
    <button weui-button weui-mini="mini" (click)="mini = !mini" [weui-type]="'warn'" [weui-loading]="loading" style="margin-left: 8px;">
      按钮
    </button>
  </div>
</Page>
